<script setup lang="ts">
import { watch, ref, onUnmounted, inject, reactive } from "vue";
import leftCompWrapper from "../common/leftCompWrapper.vue";
import { onMounted } from "vue";

import { eqpTagTable } from "@/api/visual/visualConfig";
import InspectRulesTable from "@/views/all/equip/inspect/plan/components/InspectRulesTable.vue";
import { TableItem } from "@/views/all/equip/inspect/types";

defineOptions({
  name: "tableDetector"
});
const isCollapsed = ref(false);

const props = withDefaults(
  defineProps<{
    propValue?: {
      tableData: Array<any>;
      title?: string;
      collapsed?: boolean;
      iconName?: string;
      needAlert?: boolean;
      maxHeight?: string;
      noBorder?: boolean;
      rowKey?: string;
      tableColumns?: Array<any>;
    };
  }>(),
  {
    propValue: () => ({
      tableData: [],
      title: "",
      collapsed: false,
      iconName: "titlemonitor",
      maxHeight: "224px",
      noBorder: true,
      rowKey: "id",
      tableColumns: []
    })
  }
);
const positionCode = inject("positionCode", ref(""));
const facCode = inject("facCode", ref(""));
const tableColums = ref<TableItem[]>([
  {
    prop: "index",
    label: "序号",
    minWidth: "50"
  },
  { prop: "detectorName", label: "侦测器名称", minWidth: "170" },
  {
    prop: "gas",
    label: "气体类型",
    minWidth: "100"
  },
  {
    prop: "brand",
    label: "品牌",
    minWidth: "100"
  },
  {
    prop: "position",
    label: "位置",
    minWidth: "100"
  },
  {
    prop: "range",
    label: "量程",
    minWidth: "100"
  },
  {
    prop: "scheduledAlarmSetting",
    label: "预定报警设定",
    minWidth: "130"
  },
  {
    prop: "oneAlarmValue",
    label: "一段报警值",
    minWidth: "110"
  },
  {
    prop: "twoAlarmValue",
    label: "二段报警值",
    minWidth: "110"
  },
  {
    prop: "valueMap",
    label: "实际值",
    minWidth: "90",
    customFun: row => {
      return row?.value || "-";
    }
  },
  {
    prop: "isolationMap",
    label: "隔离",
    minWidth: "90",
    customFun: row => {
      return row?.value || "-";
    }
  },
  {
    prop: "onlineMap",
    label: "上线",
    minWidth: "90",
    customFun: row => {
      return row?.value || "-";
    }
  }
]);
const queryParams = ref({ pageNum: 1, pageSize: 20 });
onMounted(() => {});
const state = reactive({
  mainData: [] as any,
  allTableData: [] as any,
  dialogTableData: [] as any,
  dialogShow: false
});
watch(
  () => props.propValue?.tableData,
  newVal => {
    queryTable(newVal);
  },
  {
    immediate: true,
    deep: true
  }
);
async function queryTable(newVal = []) {
  if (!newVal || newVal.length === 0) return;
  const params = {
    // facCode: "FAC_83abf9",
    // positionCode: "ROOM_f17d1c"
    facCode: facCode.value,
    positionCode: positionCode.value
  };
  state.allTableData = await eqpTagTable(params);
  state.mainData = state.allTableData.slice(0, 10);
}
function showDialog() {
  queryParams.value = { pageNum: 1, pageSize: 20 };
  queryDialogTable(queryParams.value);
  state.dialogShow = true;
}
function dialogClosed() {
  state.dialogShow = false;
  state.dialogTableData = [];
}
const tableRowClassName = ({ row, rowIndex }: { row: any; rowIndex: number }) => {
  if (rowIndex % 2 === 1) {
    return "detector-row";
  } else {
    return "";
  }
};
function queryDialogTable(data: any) {
  const start = data.pageSize * (data.pageNum - 1);
  const end = data.pageSize * (data.pageNum - 1) + data.pageSize;
  state.dialogTableData = state.allTableData.slice(start, end);
}
onUnmounted(() => {});
</script>

<template>
  <leftCompWrapper v-model="isCollapsed" :title="propValue.title" :icon-name="propValue.iconName" stripe :has-collapsed="propValue.collapsed">
    <div v-if="isCollapsed || !propValue.collapsed" class="h-[100%] list-warpper">
      <div class="detail-btn"><span @click.stop="showDialog">详情</span></div>
      <px-table
        ref="tableRef"
        :data="state.mainData"
        class="detector-table"
        size="small"
        :row-class-name="tableRowClassName"
        :header-cell-style="{ background: '#E7EEFB', padding: '0', height: '28px !important' }"
      >
        <px-table-column type="index" label="序号" align="left" width="50" />
        <px-table-column prop="detectorName" label="侦测器名称" align="left" show-overflow-tooltip>
          <template #default="scope">{{ scope.row.detectorName || "-" }}</template>
        </px-table-column>
        <px-table-column label="实际值" width="80" align="left" show-overflow-tooltip>
          <template #default="scope">{{ scope.row.valueMap?.value || "-" }}</template>
        </px-table-column>
      </px-table>

      <px-dialog
        v-model="state.dialogShow"
        title="侦测器列表"
        width="1200px"
        style="min-height: 580px"
        destroy-on-close
        align-center
        :append-to-body="true"
        @closed="dialogClosed"
      >
        <div class="subject-tree-content">
          <InspectRulesTable
            :query-params="queryParams"
            :table-data="state.dialogTableData"
            :tableColumns="tableColums"
            :total="state.allTableData.length"
            :height="'400px'"
            class="w-[100%]"
            @query-table="queryDialogTable"
          />
        </div>
        <template #footer>
          <div class="dialog-footer">
            <px-button type="primary" @click="dialogClosed">关闭</px-button>
          </div>
        </template>
      </px-dialog>
    </div>
  </leftCompWrapper>
</template>

<style lang="scss" scoped>
$listIcon: list-icon-;
$itemIcon: item-icon-;
$itemType: list-item-color-;

.list-warpper {
  width: 100%;
}

:deep(.px-table) {
  &.detector-table {
    height: calc(100% - 60px);

    .detector-row {
      --px-table-tr-bg-color: #f4f6fd !important;

      background-color: #f4f6fd !important;
    }
  }
}

.detail-btn {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  height: 32px;
  font-size: 14px;
  font-weight: 400;
  line-height: 32px;
  color: #3b82f6;

  & > span {
    cursor: pointer;
  }
}

:deep(.px-dialog) {
  .px-dialog__footer {
    padding-top: 0;
    text-align: center;
  }
}

.dialog-footer {
  padding: 0;
  text-align: center;
}
</style>
